<template>
  <div id="logger" class="logger" v-loading.body='fullscreenLoading' element-loading-text="拼命加载中">
    <div class="tittle-logger">
      <b>操作日志列表</b>
    </div>
    <div class="top">
      <div class="top-left">
        <div>
          <at-button type='primary' class='box-output' @click='popoutput'>
              <i class="saas-icon-res-right" style="vertical-align: -4px; left:10px; font-size:20px" ></i>
              <span style='margin-right:-15px'>导出</span>
          </at-button>
          <at-dialog title="导出" :visible.sync="exportlog" size="tiny">
              <div style='margin-top: 15px; text-align: center'>
                <at-radio-group v-model="radio">
                    <at-radio-wall :label="1">excel文档(.xlsx)</at-radio-wall>
                    <at-radio-wall :label="2">csv文件(.csv)</at-radio-wall>
                </at-radio-group>
              </div>
              <div slot="footer" class="dialog-footer">
                  <at-button type="primary" @click="popoutputfile">确 定</at-button>
                  <at-button style="margin-left: 13px;" @click="callback">取 消</at-button>
              </div>
          </at-dialog>
        </div>
        <at-button type='primary' style="width: 150px; line-height: 30px; position: relative;" @click='popsavetime'>
          <div class="i-setting">
            <i class="saas-icon-calendar" style="font-size: 20px;"></i>
          </div>
          <div style="float: left; position: absolute; left: 30px; top: 0;">
            当前保存期限为{{deadline}}
          </div>
        </at-button>
        <at-dialog title="保存期限设置" :visible.sync="savetime" size="tiny" :before-close="close" style="font-size: 12px">
          <div style='text-align: left; font-size: 12px'>当前保存期限为{{deadline}}</div>
          <div class='formselect'>
            <span>设置保存期限</span>
            <at-select @change='changedeadline'  v-model = "value" plceholder="标志为" type = "formselect" style="margin-left: 13px;">
              <at-option
                v-for="item in options"
                :key="item.savetimeval"
                :label="item.label"
                :value="item.savetimeval">
              </at-option>
            </at-select>
          </div>
          <div slot="footer" class="dialog-footer">
              <at-button type="primary" @click="submitTime">确 定</at-button>
              <at-button style="margin-left: 13px;" @click="callback">取 消</at-button>
          </div>
        </at-dialog>
      </div>
      <div class="top-right">
        <div class='changetime'>
          <at-date-picker
            v-model="timeval"
            type="datetimerange"
            :picker-options="pickerOptions2"
            placeholder="选择时间范围"
            align="left"
            @change='changetime'>
          </at-date-picker>
        </div>
        <!-- <at-input class="box-search" placeholder="请输入账号、用户名..." v-model="searchInput" @keyup.enter.native='handleIconClick' type="text" style="border: none;"/>
        <at-button type="primary" @click='handleIconClick' style="height: 30px; float: right;">搜索</at-button> -->
        <at-search  class="box-search" placeholder="请输入账号、用户名、内容描述..." v-model="searchInput"  @keyup.enter.native='handleIconClick' type="text" project='mh' icon="search" :on-icon-click="handleIconClick"/>
      </div>
    </div>
    <div id="out-table-alarm" style="margin-left: 20px; border: 1px #eeeeee">
      <at-table 
        :data="tableBox.table"  
        class='tb-logger' 
        @sort-change='orderchange'
        @filter-change="filterChange"
        >
        <at-table-column prop="aoperate_time" label="记录时间" :show-overflow-tooltip="true" width="180" sortable="custom" style="font-size: 12px; color: #5c6781"></at-table-column>
        <at-table-column prop="buser_name" label="账号" :show-overflow-tooltip="true" width="200" :filters="user_name" filter-placement="bottom-start" column-key="buser_name" style="font-size: 12px; color: #5c6781"></at-table-column>
        <at-table-column prop="cperson_name" label="用户姓名" :show-overflow-tooltip="true" width="150" :filters="person_name" filter-placement="bottom-start" column-key="cperson_name" style="font-size: 12px; color: #5c6781"></at-table-column>
        <at-table-column prop="aoperate_fun" label="功能模块" :show-overflow-tooltip="true" width="150" style="font-size: 12px; color: #5c6781"></at-table-column>
        <at-table-column prop="aoperate_type" label="操作" :show-overflow-tooltip="true" width="130" :filters="operate_type" filter-placement="bottom-start" column-key="aoperate_type" style="font-size: 12px; color: #5c6781"></at-table-column> 
        <at-table-column prop="aremark" label="内容描述" :show-overflow-tooltip="true" style="font-size: 12px; color: #5c6781"></at-table-column>
        <at-table-column prop="alogin_ip" label="客户端IP" :show-overflow-tooltip="true" width="200" style="font-size: 12px; color: #5c6781"></at-table-column>
      </at-table>
    </div>
    <div class='footer'>
      <Pagination 
        :currentPage="tableBox.tableData.pagination.current" 
        :total="tableBox.total" 
        :pageSizes="[20, 40, 60, 80]" 
        :pageSize="tableBox.tableData.pagination.pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange">
      </Pagination>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'operatelogger',
  data () {
    return {
      searchInput: '',
      exportlog: false,
      exportmsg: false,
      savetime: false,
      radio: 1,
      currentPagee: 1,
      id_store: [],
      rowval: [],
      options: [{
        savetimeval: '6个月',
        label: '六个月'
      }, {
        savetimeval: '1年',
        label: '一年'
      }, {
        savetimeval: '2年',
        label: '两年'
      }, {
        savetimeval: '3年',
        label: '三年'
      }],
      operate_type: [{ text: '新增', value: '新增' },
        { text: '登录', value: '登录' }, {
          text: '修改', value: '修改'
        }, { text: '删除', value: '删除' }],
      value: '',
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      timeval: ''
    }
  },
  created () {},
  computed: {
    deadline: {
      get () {
        return this.$store.state.operatelog.deadline
      },
      set (val) {
        this.$store.state.operatelog.deadline = val
      }
    },
    ...mapState({
      // 表格数据
      tableBox: state => state.operatelog.tableBox,
      person_name: state => state.operatelog.person_name,
      user_name: state => state.operatelog.user_name,
      // 全屏等待
      fullscreenLoading: state => state.operatelog.fullscreenLoading
    })
  },
  methods: {
    // 更改设置期限
    changedeadline (val) {
      if (val == null) {
        return false
      }
      this.deadline = val
    },
    // 筛选
    filterChange (val) {
      this.$store.dispatch('/operatelog/filterChange', val)
    },
    // 换页
    handleCurrentChange (page) {
      this.$store.dispatch('/operatelog/handleCurrentChange', page)
    },
    // 改变每页条数
    handleSizeChange (pageSizes) {
      this.$store.dispatch('/operatelog/handleSizeChange', pageSizes)
    },
    // 搜索
    handleIconClick () {
      console.log(this.timeval)
      this.$store.dispatch('/operatelog/handleIconClick', this.searchInput, this.currentPagee)
    },
    // 排序
    orderchange ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'aoperate_time'
        order = 'descending'
      }
      this.$store.dispatch('/operatelog/order', {
        key: prop,
        value: order.slice(0, -3)
      })
    },
    // 选择时间范围
    changetime (val) {
      this.$store.dispatch('/operatelog/changetime', {
        key: 'aoperate_time',
        startTime: val.slice(0, -22),
        endTime: val.slice(22, 41)
      })
    },
    // 获取数据(Value = '')正常传值 Value !='' 时，搜索
    getdata () {
      this.tableBox.tableData.pagination.current = 1
      this.$store.dispatch('/operatelog/getdata')
    },
    // 弹出导出栏
    popoutput () {
      this.exportlog = true
    },
    // 判断文件类型并导出
    popoutputfile () {
      if (this.radio === 1) {
        this.callback()
        this.$store.dispatch('/operatelog/exportfile', this.radio)
      } else {
        this.callback()
        this.$store.dispatch('/operatelog/exportfile', this.radio)
      }
    },
    // 获取设置的最后期限
    getdeadline () {
      this.$store.dispatch('/operatelog/deadline')
    },
    // 获取筛选账号,用户名
    getuserpersonname () {
      this.$store.dispatch('/operatelog/userpersonname')
    },
    // 弹出保存期限提示栏
    popsavetime () {
      this.savetime = true
    },
    // 提交保存设置期限
    submitTime () {
      if (this.deadline === '6个月') {
        this.$store.dispatch('/operatelog/updata', { data: { 'deadline': '6 mouth' }, func: this.callback })
      } else if (this.deadline === '1年') {
        this.$store.dispatch('/operatelog/updata', { data: { 'deadline': '1 year' }, func: this.callback })
      } else if (this.deadline === '2年') {
        this.$store.dispatch('/operatelog/updata', { data: { 'deadline': '2 year' }, func: this.callback })
      } else {
        this.$store.dispatch('/operatelog/updata', { data: { 'deadline': '3 year' }, func: this.callback })
      }
    },
    // 返回主页面
    callback () {
      this.value = null
      this.exportlog = false
      this.savetime = false
      this.exportmsg = false
      this.getdeadline()
    },
    // 点击灰色部分默认关闭
    close (hide) {
      this.value = null
      this.exportlog = false
      this.savetime = false
      this.exportmsg = false
      this.getdeadline()
      hide()
    }
  },
  mounted () {
    this.getdata()
    this.getdeadline()
    this.getuserpersonname()
  }
}
</script>
<style lang='less'>
  .logger {
    padding-right: 20px;
    background-color: #ffffff;
    position: relative;
    height: 100%;
    font-family: "SimSun";
    /* min-height: 900px; */
  }
  .logger .tittle-logger {
    height: 50px;
    padding-left: 20px;
    font-size: 14px;
    color: #5c6781;
    line-height: 50px;
    border-bottom: 1px solid #eeeeee;
  }
  .logger .top {
    margin-left: 20px;
    overflow: hidden;
    padding: 10px 0 0 0;
  }
  .logger .top .i-setting {
    width: 20px;
    height: 19px;
    position: absolute;
    top: 4px;
    left: 6px;
    display: inline-block;
    line-height: 20px;
  }
  .logger .top-left {
    width: 265px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    float: left;
  }
  .logger .saas-icon-setting {
    font-size: 20px;
    text-align: center;
  }
  .logger .top-right {
    width: 687px;
    float: right;
  }
  .logger .changetime {
    float: left;
  }
  .logger .box-search {
    margin-left: 5px;
  }
  .logger .box-output {
    float: left;
    margin-right: 10px;
    padding-right: 15px;
  }
  .logger .formselect {
    width: 470px;;
    float: left;
    margin-top: 8px;
    font-size: 12px;
    padding-left: 15px;
    padding-right: 6px;
  }
  .logger .formselect .at-select{
    width:349px;
  }
  .logger .formselect  .at-select .at-input__inner {
    width: 349px;
  }
  .logger .formselect .at-select .at-input .at-input__icon {
    position: absolute; left: 330px;
  }
  .logger table {
    border-collapse: separate;
  }
  .logger .footer {
    margin-left: 20px;
    margin-top: 20px;
    text-align: center;
    padding-bottom: 20px;
  }
  .logger .at-radio-group .at-radio {
    margin: 10px 20px;
  }
  .logger .at-dialog-box .at-dialog--tiny {
    width: 500px;
  }
  .logger .top-left .dialog-footer {
    text-align: center;
  }
  .logger .at-dialog-box .at-dialog--tiny .at-dialog__body, .at-dialog-box {
    padding-top: 10px;
  }
  .logger .at-dialog-box .at-dialog__body {
    padding: 5px 20px;
    height: 98px;
  }
  .logger .at-table__body-wrapper {
    overflow: hidden;
  }
</style>
  